<template>
  <div class="list container">
    <div class="box col-md-8 col-xs-10 col-xs-push-10">
      {{ 1 + 2 }}
    </div>
    <div class="box col-md-8 col-xs-10 col-xs-pull-10">
      {{ 1 + 3 }}
    </div>
    <div class="box col-md-8 col-xs-24">
      {{ 1 + 4 }}
    </div>
  </div>
  <div class="list container">
    <div class="box col-md-12 col-xs-24 col-lg-8">
      {{ 1 + 5 }}
    </div>
    <div class="box col-md-12 col-xs-24 col-lg-8">
      {{ 1 + 6 }}
    </div>
    <div class="box col-md-8 col-xs-24 col-lg-8">
      {{ 1 + 7 }}
    </div>
  </div>
  <div>
    <button @click="add">添加</button>
  </div>
  <MulActionSlots>
    <template #actions>内容1</template>
  </MulActionSlots>
</template>
<script>
import MulActionSlots from './components/MulActionSlots.vue'
export default {
  components: {
    MulActionSlots
  },
  data() {
    return {}
  },
  methods: {
    add() {
      console.log(`helloworld`)
    }
  }
}
</script>
<style type="text/css">
@import '@/style/bootstrap.css';
.box {
  height: 100px;
  border: 1px solid #000;
}
</style>
